<template>
    <div class="detail_container">
        <!-- topbar组件 -->
        <TopBar></TopBar>
        <div class="container">
            <!-- 轮播图 -->
            <div class="swiper_container">
                <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" lazy-render>
                    <van-swipe-item v-for="image in images" :key="image">
                        <img class="swipe_img" :src="image" />
                    </van-swipe-item>
                    <template #indicator="{ active, total }">
                        <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
                    </template>
                </van-swipe>
            </div>
            <!-- 横幅 -->
            <div class="banner_content flex">
                <div class="banner_left flex_c">
                    <div class="text flex">
                        <span>每日抄底</span>
                        <span>&nbsp;|&nbsp;</span>
                        <span class="flex">距结束&nbsp;
                            <van-count-down :time="time" />
                        </span>
                    </div>
                    <div class="price">
                        <span class="current_price">￥22.9</span>
                        <span class="couter_price">￥29.9</span>
                    </div>
                </div>
                <div class="banner_right flex">
                    <img class="logourl" src="	https://yanxuan.nosdn.127.net/static-union/1678945972c531b5.png" alt="">
                </div>
            </div>
            <!-- vip会员卡片广告 部分商品没有此元素 -->
            <div class="vip_banner flex">
                <div class="vip_left flex">
                    <img class="icon_pro" src="//yanxuan.nosdn.127.net/08252a1e8acffc6e34e57e552bd1f5f2.png" alt="">
                    <span class="vip_text">Pro会员叠加优惠，再省</span>
                    <span class="vip_discountprice">￥1.8</span>
                    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4006520_m2492tld1lj.css">
                    <span class="iconfont icon-gantanhaozhong"></span>
                </div>
                <div class="vip_right">开通</div>
            </div>
            <!-- 商品数据 -->
            <div class="good_detail flex">
                <div class="left_data flex_c">
                    <div class="good_name">轻卡一餐，魔芋粗粮炒饭</div>
                    <div class="secondrow flex">
                        <img class="ziying_img" src="https://yanxuan.nosdn.127.net/6366944e4ac00118969787dedf9520e7.png"
                            alt="">
                        <img class="ball" src="https://yanxuan-item.nosdn.127.net/953fd27555b9382e9d3d656a54398953.png"
                            alt="">
                        <span class="netease">网易严选</span>
                    </div>
                    <div class="desc">推荐理由</div>
                </div>
                <div class="comment flex">
                    <div class="comment_block flex_c">
                        <div class="comment_count">99.7%</div>
                        <div class="haoping">好评率</div>
                    </div>
                    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4006520_cdv5o05xy3m.css">
                    <div class="icon iconfont icon-xiangyou1"></div>
                </div>


            </div>
            <!-- 推荐理由 -->
            <div class="rcmdBanner_container">
                <div class="rcmdBanner">
                    <ul>
                        <li>
                            <div class="key">1</div>
                            <div class="recommendReason">天竺棉，针织面料自然肌理</div>
                        </li>
                        <li>
                            <div class="key">2</div>
                            <div class="recommendReason">天竺棉，针织面料自然肌理</div>
                        </li>
                        <li>
                            <div class="key">3</div>
                            <div class="recommendReason">天竺棉，针织面料自然肌理</div>
                        </li>
                        <li>
                            <div class="key">4</div>
                            <div class="recommendReason">天竺棉，针织面料自然肌理</div>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 灰色背景图 -->
            <div class="placeholder"></div>
            <!-- 商品提示-->
            <div class="serve_list">
                <div class="postage flex">
                    <div class="postage_text">邮费：满99包邮</div>
                    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4006520_8xc5x6z2aq7.css">
                    <span class="iconfont icon-xiangyou1"></span>
                </div>
                <!-- 这个元素需要根据情况控制显隐 -->
                <!-- <div class="promotion">
                </div> -->
                <div class="discounts_container flex">
                    <div class="discounts">
                        购物返：最高返
                        <span>1积分</span>
                    </div>
                    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4006520_8xc5x6z2aq7.css">
                    <span class="iconfont icon-xiangyou1"></span>
                </div>
            </div>
            <!-- 灰色背景图 -->
            <div class="placeholder"></div>
            <!-- 选择商品规格及服务 -->
            <div class="serve_list">
                <div class="postage flex">
                    <div class="postage_text">请选择商品规格数量</div>
                    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4006520_8xc5x6z2aq7.css">
                    <span class="iconfont icon-xiangyou1"></span>
                </div>
                <div class="postage flex">
                    <div class="postage_text">限制：该商品不可使用购物券</div>
                </div>
                <div class="postage flex">
                    <div class="postage_text">配送：
                        <span>请选择配送地址</span>
                    </div>
                    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4006520_8xc5x6z2aq7.css">
                    <span class="iconfont icon-xiangyou1"></span>
                </div>
                <div class="discounts_container serve_container flex">
                    <div class="duiqi flex">
                        <div class="postage_text">服务：</div>
                        <div class="serve flex_c">
                            <div class="onerow">
                                <span class="dian">·</span><span>严选自营</span>
                                <span class="dian text">·不支持无忧退换</span>
                            </div>
                        </div>
                    </div>

                    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4006520_8xc5x6z2aq7.css">
                    <span class="iconfont icon-xiangyou1"></span>
                </div>
            </div>
            <!-- 中部的轮播图 -->
            <div class="middle_swiper_container">
                <div class="placeholder"></div>
                <div class="m-adBanner">
                    <van-swipe class="my-wipe" :autoplay="5000" indicator-color="red">
                        <van-swipe-item>
                            <img
                                src="https://yanxuan.nosdn.127.net/static-union/16794529899d9b90.jpg?quality=75&type=webp&imageView&thumbnail=750x0">
                        </van-swipe-item>
                        <van-swipe-item>
                            <img
                                src="https://yanxuan.nosdn.127.net/e1dd7d1e7c4e4de84f68ce27af28990f.jpg?quality=75&type=webp&imageView&thumbnail=750x0">
                        </van-swipe-item>
                    </van-swipe>
                </div>
            </div>
            <!-- 评论 -->
            <div class="dt-section-top">
                <div class="newItemComment">
                    <header>
                        <div class="title">用户评价(62397)</div>
                        <div class="comment-checkAll">
                            <span>
                                <span class="rate">99.7%</span>好评率
                            </span>
                            <i class="icon u-icon-list-address-right"></i>
                        </div>
                    </header>
                    <div class="g-c">
                        <div class="m-comment f-pr m-comment-detail">
                            <header>
                                <div class="left">
                                    <img class="avatar"
                                        src="https://yanxuan.nosdn.127.net/8945ae63d940cc42406c3f67019c5cb6.png?type=webp&imageView&quality=75&thumbnail=60x60">
                                    <span class="name">1****1</span>
                                </div>
                            </header>
                            <div class="extraInfo">
                                <span class="time">2022-06-14 18:58:42</span>
                                <span class="skus">单枕 45*70cm（防螨磨毛款）</span>
                            </div>
                            <div class="content">
                                <div class="inner">
                                    发货很快，物价便宜，所以对于这个价位还不错，发货很快，物价便宜，所以对于这个价位还不错，发货很快，物价便宜，所以对于这个价位还不错
                                </div>
                            </div>
                            <div class="commentPics">
                                <div class="m-commentPics">
                                    <ul class="list">
                                        <li class="item-wrap">
                                            <div class="item">
                                                <img src="https://yanxuan.nosdn.127.net/2f9e5142153b88a23ae585236bc5a46a.jpg?watermark&type=2&gravity=southeast&dissolve=80&font=c2ltZmFuZw==&fontsize=400&fontcolor=d2hpdGU=&text=eXgxNjMxNzg2MDI=|imageView&quality=75&thumbnail=144x0&type=webp"
                                                    style="width: 100%;">
                                            </div>
                                        </li>
                                        <li class="item-wrap">
                                            <div class="item">
                                                <img src="https://yanxuan.nosdn.127.net/8636be484f939e92ffb305d43efa4671.jpg?watermark&type=2&gravity=southeast&dissolve=80&font=c2ltZmFuZw==&fontsize=400&fontcolor=d2hpdGU=&text=eXgxNjMxNzg2MDI=|imageView&quality=75&thumbnail=144x0&type=webp"
                                                    style="width: 100%;">
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 严选logo -->
            <div class="dt-section-bottom">
                <div class="m-brandInfo">
                    <div class="info">
                        <div class="left">
                            <img src="https://yanxuan-item.nosdn.127.net/953fd27555b9382e9d3d656a54398953.png"
                                class="brand-logo">
                        </div>
                        <div class="right">
                            <div class="title">
                                网易严选
                                <i class="u-icon u-address-right icon"></i>
                            </div>
                            <div class="desc">
                                以“让美好生活触手可及”为初心，网易严选逐步发展成为中国新中产喜爱的生活方式品牌。
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 商品参数 -->
            <div class="lazy-component-wrapper">
                <div class="m-itemDetail">
                    <div class="dt-section dt-section-1">
                        <div class="m-attrCon">
                            <div class="attrList">
                                <div class="tt">商品参数</div>
                                <div class="item">
                                    <div class="left">形状</div>
                                    <div class="right">
                                        <div class="con">长方形</div>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="left">功能</div>
                                    <div class="right">
                                        <div class="con">舒压护颈、草本保健、抗菌防螨</div>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="left">适用季节</div>
                                    <div class="right">
                                        <div class="con">秋、春、四季、冬、夏、春秋、其他、不限季节</div>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="left">类型</div>
                                    <div class="right">
                                        <div class="con">花草枕、纤维枕</div>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="left">软硬度</div>
                                    <div class="right">
                                        <div class="con">软硬适中</div>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="left">高度</div>
                                    <div class="right">
                                        <div class="con">标准</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="dt-section dt-section-1">
                    <div class="lazy-component-wrapper">
                        <div class="m-detailHtml">
                            <p>
                                <img
                                    src="https://yanxuan-item.nosdn.127.net/e7dd2b5243e9e4927793efc60dc8001f.jpg?quality=75&amp;type=webp&amp;imageView">
                            </p>
                            <p>
                                <img
                                    src="https://yanxuan-item.nosdn.127.net/e43fe477698ed436ce24b6de3a71a1f8.jpg?quality=75&type=webp&imageView">
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 底部常见问题 -->
            <div class="bottom">
                <div class="m-commonIssues ">
                    <div class="tt">
                        <div class="line"></div>
                        <span class="text">常见问题</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 回到顶部 -->
        <van-back-top class="backTop" bottom="80px" style="background-color: #fff">
            <van-icon name="arrow-up" color="black" />
        </van-back-top>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
//轮播图基础数据
const images = [
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
];
const time = ref(30 * 60 * 60 * 1000)



</script>

<style lang="less" scoped>
.flex {
    display: flex;
}

.flex_c {
    display: flex;
    flex-direction: column;
}

.detail_container {
    height: 617px;

    .container {

        // 轮播图
        .swiper_container {
            .my-swipe {
                height: 375px;
                width: 100%;

                .van-swipe-item {
                    height: 100%;
                }

                .custom-indicator {
                    position: absolute;
                    right: 5px;
                    bottom: 5px;
                    padding: 2px 5px;
                    font-size: 12px;
                    background: rgba(175, 170, 170, 0.1);
                }

                .swipe_img {
                    width: 100%;
                    height: 100%;
                }
            }
        }

        //横幅
        .banner_content {
            background: red;
            width: 100%;
            height: 74px;
            color: #fff;

            .banner_left {
                justify-content: space-around;
                margin-left: 15px;
                width: 285px;
                height: 100%;

                .text {
                    font-size: 12px;

                    .van-count-down {
                        color: #fff;
                    }
                }

                .current_price {
                    font-size: 28px;
                }

                .couter_price {
                    font-size: 14px;
                    text-decoration: line-through;
                }

            }

            .banner_right {
                align-items: center;

                .logourl {
                    width: 75px;
                    height: 40px;
                }
            }
        }

        // Pro会员广告卡片 vipbanner
        .vip_banner {
            width: 345px;
            height: 40px;
            margin-top: 20px;
            margin-left: 15px;
            line-height: 40px;
            background: #FFF1D2;
            justify-content: space-between;
            align-items: center;

            .vip_left {
                margin-left: 10px;
                width: 200px;
                height: 34px;
                position: relative;

                .vip_text {
                    position: absolute;
                    left: 30px;
                    top: 10px;
                    height: 14px;
                    line-height: 14px;
                    font-size: 12px;
                    color: #333;
                }

                .icon_pro {
                    position: absolute;
                    top: 10px;
                    left: 5px;
                    width: 21px;
                    height: 12px;
                }

                .vip_discountprice {
                    font-weight: bolder;
                    color: red;
                    height: 14px;
                    line-height: 14px;
                    font-size: 14px;
                    position: absolute;
                    left: 157px;
                    top: 10px;
                }

                .iconfont {
                    position: absolute;
                    right: -8px;
                    top: -3px;
                }
            }

            .vip_right {
                color: #FFF1D2;
                width: 48px;
                font-size: 12px;
                height: 24px;
                line-height: 24px;
                text-align: center;
                background: #12161C;
                border-radius: 20px;
                margin-right: 10px;
            }
        }

        //商品详情
        .good_detail {
            margin: 15px;
            width: 345px;
            align-items: center;

            .left_data {
                width: 259px;

                .good_name {
                    height: 24px;
                    line-height: 24px;
                    font-size: 16px;
                    font-weight: bolder;

                }

                .secondrow {
                    height: 28px;
                    line-height: 28px;
                    align-items: center;

                    .ziying_img {
                        width: 32px;
                        height: 16px;
                    }

                    .ball {
                        widows: 14px;
                        height: 14px;
                        margin-left: 3px;
                    }

                    .netease {
                        font-size: 12px;
                        height: 18px;
                        line-height: 18px;
                        text-align: center;
                        color: #7f7f7f;
                        margin-left: 3px;
                    }
                }

                .desc {
                    height: 18px;
                    line-height: 18px;
                    font-size: 12px;
                    color: #333;
                    font-weight: lighter;
                }
            }

            .comment {
                height: 44.5px;
                align-items: center;

                .comment_block {
                    .comment_count {
                        font-weight: bold;
                        color: #DD1A21;
                        font-size: 16px;
                        height: 22.5px;
                        line-height: 22.5px;
                        text-align: center;
                    }

                    .haoping {
                        text-align: center;
                        height: 18px;
                        line-height: 18px;
                        font-size: 12px;
                        color: #7f7f7f;
                    }
                }
            }

        }

        // 推荐理由
        .rcmdBanner_container {
            .rcmdBanner {
                margin: 0 15px 20px 15px;
                padding: 7px 10px;
                width: 324px;
                border-radius: 4px;
                line-height: 12px;
                background: #fafafa;
                border: 1px solid #e6e6e6;
                border-radius: 4px;
                position: relative;

                .key {
                    display: inline-block;
                    width: 12px;
                    height: 12px;
                    border: 1px solid #dd1a21;
                    border-radius: 50%;
                    text-align: center;
                    line-height: 12px;
                    font-size: 12px;
                    color: #dd1a21;
                    font-family: PingFang SC;
                    font-weight: 700;
                    margin-right: 4px;
                    vertical-align: middle;
                }

                li {
                    height: 18px;
                    line-height: 18px;
                    font-family: PingFangSC-Regular;
                    font-size: 12px;
                    color: #333;

                    .recommendReason {
                        display: inline-block;
                        height: 18px;
                        line-height: 18px;
                        vertical-align: middle;
                    }
                }
            }

            ul {
                list-style-type: none;
                margin: 0;
                padding: 0;
            }
        }

        .placeholder {
            width: 100%;
            height: 10px;
            background: #F4F4F4;
        }

        // 商品提示
        .serve_list {
            padding-left: 15px;
            width: 360px;
            background: #fff;
            font-size: 14px;

            .postage {
                height: 52px;
                line-height: 52px;
                border-bottom: #ddd 1px solid;
                justify-content: space-between;

                .iconfont {
                    padding-right: 10px;
                }
            }

            .discounts_container {
                height: 52px;
                line-height: 52px;
                justify-content: space-between;

                .discounts {
                    height: 52px;
                    line-height: 52px;

                    span {
                        color: red;
                    }
                }

                .iconfont {
                    padding-right: 10px;
                }

                .serve {
                    height: 16px;
                    font-size: 12px
                }

            }

            .serve_container {
                .onerow {
                    .text {
                        margin-left: 10px;
                    }

                    .dian {
                        color: red;
                    }
                }

                .duiqi {
                    justify-content: space-between;

                }
            }

        }


        // 中部轮播图
        .middle_swiper_container {
            .placeholder {
                width: 100%;
                height: 10px;
                background: #F4F4F4;
            }

            .m-adBanner {
                background: #fff;
                border-bottom: 9.6px solid #F4F4F4;

                .my-wipe {
                    width: 100%;
                    height: 100px;
                }

                img {
                    width: 100%;
                    height: 100%;
                }
            }


        }

        // 评论区
        .dt-section-top {
            border-bottom: 9.6px solid #eee;
            background: #fff;

            .newItemComment {

                header {
                    margin-left: 15px;
                    position: relative;
                    border-bottom: 1px solid #d9d9d9;
                    padding: 15px 90px 15px 0;

                    .title {
                        line-height: 15px;
                        font-size: 14px;
                        color: #333;
                    }

                    .comment-checkAll {
                        position: absolute;
                        padding-right: 22.5px;
                        right: 6px;
                        top: 0;
                        bottom: 0;
                        margin: auto;
                        font-size: 14px;
                        color: #333;
                        height: 25px;
                        line-height: 25px;

                        .rate {
                            color: #dd1a21;
                        }

                        .icon {
                            position: absolute;
                            top: 0;
                            bottom: 0;
                            margin: auto;
                        }
                    }

                }

                .g-c {
                    padding: 0 15px;

                    .m-comment {
                        header {
                            display: flex;
                            align-items: center;
                            padding: 15px 0 2px 0;

                            .left {
                                display: flex;
                                align-items: center;
                                font-size: 14px;

                                .avatar {
                                    width: 32px;
                                    height: 32px;
                                    margin-right: 8px;
                                    border-radius: 50%;
                                    overflow: hidden;
                                }

                                .name {
                                    margin-right: 6px;
                                }
                            }
                        }

                        .extraInfo {
                            margin-top: 9px;
                            font-size: 12px;
                            line-height: 1;
                            color: #7f7f7f;

                            .time {
                                font-size: 12px;
                                line-height: 1;
                                color: #7f7f7f;
                            }

                            .skus {
                                display: inline-block;
                                margin-left: 8px;
                            }
                        }

                        .content {
                            margin-top: 9px;
                            padding-right: 15px;

                            .inner {
                                white-space: pre-line;
                                word-wrap: break-word;
                                word-break: break-all;
                                font-size: 14px;
                                line-height: 20px;
                                font-weight: 400;
                                color: #333;
                                display: -webkit-box;
                                -webkit-line-clamp: 2;
                                -webkit-box-orient: vertical;
                                overflow: hidden;
                                text-overflow: ellipsis;
                            }
                        }

                        .commentPics {
                            margin: 11px 0 3px;

                            .list {
                                overflow: hidden;

                                .item-wrap {
                                    position: relative;
                                    z-index: 1;
                                    float: left;
                                    overflow: hidden;
                                    width: 72px;
                                    height: 72px;
                                    border: 1px solid #d9d9d9;
                                    margin-right: 13.5px;
                                    border-radius: 4px;
                                }
                            }
                        }
                    }
                }
            }
        }

        // 严选logo
        .dt-section-bottom {
            .m-brandInfo {
                position: relative;
                background: #fff;
                color: #000;
                padding-bottom: 15px;
                overflow: hidden;

                .info {
                    display: flex;

                    .brand-logo {
                        width: 48px;
                        height: 48px;
                        margin-left: 22.5px;
                        margin-top: 25px;
                        margin-right: 19.5px;
                    }

                    .right {
                        margin-right: 15px;
                        width: 260px;

                        .title {
                            height: 24px;
                            font-weight: 600;
                            margin-top: 20px;
                            margin-bottom: 8px;
                            margin-right: 10px;
                            font-size: 16px;
                            line-height: 24px;
                            display: flex;
                            align-items: center;
                        }

                        .u-address-right {
                            background-image: url(https://yanxuan-static.nosdn.127.net/hxm/tetris/base-mobile/sprite/list.png);
                            display: inline-block;
                            vertical-align: middle;
                            width: 25px;
                            height: 25px;
                            background-size: 100% 100%;
                            background-position: 0 -2px;
                            position: absolute;
                            right: 10px;
                        }

                        .desc {
                            font-size: 12px;
                            width: 260px;
                            line-height: 18px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 2;
                        }
                    }

                }
            }
        }

        //商品详情参数
        .lazy-component-wrapper {

            .m-itemDetail {
                width: 100%;
                overflow-x: hidden;

                .dt-section-1 {
                    border-bottom: none;

                    .m-attrCon {
                        padding: 15px;

                        .attrList {
                            .tt {
                                padding: 20px 0 12px;
                                font-size: 14px;
                                line-height: 1;
                            }

                            .item {
                                font-size: 12px;
                                line-height: 22px;
                                padding: 5px 15px 5px 0;
                                background-image: linear-gradient(97deg, #919191 33%, hsla(0, 0%, 100%, 0) 0);
                                background-position: top;
                                background-size: 12px 1px;
                                background-repeat: repeat-x;

                                .left {
                                    float: left;
                                    width: 74px;
                                    position: relative;
                                    color: #999;
                                }

                                .right {
                                    margin-left: 84px;
                                }
                            }

                            .item:after {
                                display: block;
                                clear: both;
                                visibility: hidden;
                                height: 0;
                                overflow: hidden;
                                content: ".";
                            }

                        }
                    }
                }
            }

            .dt-section {
                .lazy-component-wrapper {
                    .m-detailHtml {
                        width: 100%;

                        img {
                            width: 100%;
                            height: auto;
                            vertical-align: top;
                        }
                    }
                }
            }
        }

        // 底部常见问题
        .bottom {
            .m-commonIssues .tt {
                position: relative;
                padding: 27px 0;
                text-align: center;

                .line {
                    width: 149px;
                    border-bottom: 1px solid #ccc;
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    margin: auto;
                    height: 1px;
                    background-color: #ccc;
                    z-index: 1;
                }

                .text {
                    display: inline-block;
                    font-size: 16px;
                    padding-right: 8px;
                    padding-left: 8px;
                    line-height: 1;
                    color: #333;
                    background-color: #fff;
                    position: relative;
                    z-index: 2;
                }
            }
        }
    }

}
</style>